<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view style="padding-left: 40rpx;padding-right: 40rpx;">
<!--				<view class="title">涉事人信息</view>-->
				<view>
					<view class="uni-form-item uni-column">
						<view class="uni-form-item uni-column">
							<view class="sub-title">开始日期</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker picker mode="date" :value="startTime" :start="startDate" :end="endDate" @change="bindStartTimeChange">
										<input class="uni-input" name="begin_time" :value="startTime" disabled/>
									</picker>
								</view>
							</view>
						</view>
						<view class="divider"></view>
						<view class="uni-form-item uni-column">
							<view class="sub-title">结束日期</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker picker mode="date" :value="endTime" :start="startDate" :end="endDate" @change="bindEndTimeChange">
										<input class="uni-input" name="end_time" :value="endTime" disabled/>
									</picker>
								</view>
							</view>
						</view>
						<view class="divider"></view>
						<view class="sub-title">场所</view>
						<input class="uni-input" name="car_number" placeholder="请输入场所" />
						<view class="divider"></view>
					</view>
				</view>
				<view class="uni-btn-v" style="margin-bottom: 40rpx;">
					<button form-type="submit">查询</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				addressData: {},
				genderArray: ['男', '女'],
				credentials: ['身份证', '回乡证', '护照', "军官证", "同胞证", "港澳居民居住证"],
				credentialIndex: 0,
				genderIndex: 0,
				startTime: currentDate,
				endTime: currentDate,
				time: '12:01',
				cityPickerValueDefault: [0, 0, 0],
				pickerText: '',
			}
		},
		onLoad() {

		},
		components: {
			simpleAddress
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = e.label;
				this.addressData = e;
			},
			bindGenderChange: function(e) {
				this.genderIndex = e.target.value
			},
			bindCredentialChange: function(e) {
				this.credentialIndex = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindStartTimeChange: function(e) {
				this.startTime = e.target.value
			},
			bindEndTimeChange: function(e) {
				this.endTime = e.target.value
			},
			formSubmit: function(e) {
				const formData = e.detail.value;
			}
		}
	}
</script>

<style>
	input{
		height: 70rpx;
	}
	
	#from{
		padding-left: 100rpx;
	}
	
	.uni-form-item .title {
		padding: 20rpx 0;
	}

	#ta-remark{
		min-height: 100rpx;
	}

	.radio {
		top: 50%;
		transform: translate(0%, 25%);
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.sub-title {
		font-size: 35rpx;
		margin-bottom: 25rpx;
	}

	.divider {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: #DDDDDD;
		height: 1rpx;
		width: 100%;
		border: none;
	}

	.label {
		display: flex;
		position: relative;
	}
</style>
